<template>
  <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
    <el-form-item label="标题" prop="title">
      <el-input v-model="formData.title" placeholder="请输入书签标题"></el-input>
    </el-form-item>
    
    <el-form-item label="URL" prop="url">
      <el-input v-model="formData.url" placeholder="请输入URL地址">
        <template slot="append">
          <el-button @click="fetchFavicon">获取图标</el-button>
        </template>
      </el-input>
    </el-form-item>
    
    <el-form-item label="分类" prop="category">
      <el-select v-model="formData.category" placeholder="请选择分类">
        <el-option
          v-for="item in categories"
          :key="item._id"
          :label="item.name"
          :value="item._id"
        >
          <span style="float: left">
            <i :class="item.icon || 'el-icon-folder'" :style="{ color: item.color }"></i>
            {{ item.name }}
          </span>
        </el-option>
      </el-select>
    </el-form-item>
    
    <el-form-item label="描述" prop="description">
      <el-input
        type="textarea"
        v-model="formData.description"
        :rows="3"
        placeholder="请输入书签描述"
      ></el-input>
    </el-form-item>
    
    <el-form-item label="图标" prop="favicon">
      <el-input v-model="formData.favicon" placeholder="图标URL地址">
        <template slot="append">
          <el-button @click="previewFavicon">预览</el-button>
        </template>
      </el-input>
      <div v-if="formData.favicon" class="favicon-preview">
        <img :src="formData.favicon" alt="favicon">
      </div>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="submitForm">保存</el-button>
      <el-button @click="$emit('cancel')">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'BookmarkForm',
  props: {
    bookmark: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      formData: {
        title: '',
        url: '',
        category: '',
        description: '',
        favicon: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入URL', trigger: 'blur' },
          { type: 'url', message: '请输入正确的URL地址', trigger: 'blur' }
        ],
        category: [
          { required: true, message: '请选择分类', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    ...mapState(['categories'])
  },
  watch: {
    bookmark: {
      handler(val) {
        if (val) {
          this.formData = { ...val }
        }
      },
      immediate: true
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('submit', this.formData)
        }
      })
    },
    fetchFavicon() {
      if (!this.formData.url) {
        this.$message.warning('请先输入URL地址')
        return
      }
      
      try {
        const url = new URL(this.formData.url)
        this.formData.favicon = url.protocol + '//' + url.hostname + '/favicon.ico'
      } catch (error) {
        this.$message.error('无效的URL地址')
      }
    },
    previewFavicon() {
      if (!this.formData.favicon) {
        this.$message.warning('请先输入或获取图标URL')
        return
      }
      
      window.open(this.formData.favicon, '_blank')
    }
  }
}
</script>

<style lang="less" scoped>
.favicon-preview {
  margin-top: 10px;
  
  img {
    width: 16px;
    height: 16px;
    vertical-align: middle;
  }
}
</style> 